<template>
  <div>
    <header class="header">
      <div class="title">
        <img src="../../../assets/images/01_11.png" alt="" class="img_zuo" @click="clickBack" />
        <div>巡查排查查询</div>
      </div>
    </header>
    <div class="menPhis-main">
      <div class="menPhis-date-box">
        <div class="date-box">
          <div class="date-boxs" @click="openPopup(0)">
            <span class="">{{ origin }}</span>
            <img :src="url" class="img">
          </div>
          <div class="date-line">-</div>
          <div class="date-boxs" @click="openPopup(1)">
            <div class="">{{ terminus }}</div>
            <img :src="url" class="img">
          </div>
        </div>
        <div class="search-box">
          <div class="search-boxs">
            <img src="../../../assets/images/img/search.png" class="img">
            <input
              type="text"
              v-model="searchText"
              class="search-input"
              placeholder="请输入业务类别/参与人员/内容详情等">
          </div>
          <div style="color: #007aff"
               :style="code === 0 ? 'pointer-events:none' : ''"
               @click="searchQuery(1)">搜索</div>
        </div>
      </div>
      <div class="menPhis-date-list">
        <div class="list-title">搜索结果</div>
        <div class="list-gun">
          <van-list
            class="van-pull-refresh"
            v-model="loading"
            :finished="finished"
            :finished-text="finishedText"
            @load="onLoads()">
            <div @click="jumpDetail(item)" class="box_list" v-for="(item, index) in searchList" :key="index">
              <img class="img_logo5" src="../../../assets/images/logo5.png" />
              <div class="center">
                <div style="width: 70%;">
                  <div class="small_title">[{{item.jgconfigname}}]{{item.title}}</div>
                  <div class="introduce">
                    <div class="intro_name">
                      <div v-if="item.yhlb === 100 || item.yhlb === 102">
                        <img
                          style="width: 13px"
                          :src="item.isRectifica === 1 || item.isRectifica === 3 || item.isRectifica === 6 ? isRectificas : isRectifica" />
                      </div>
                      <div v-else>
                        <div v-if="item.hasOwnProperty('isRectifica')">
                          <img v-if="item.isRectifica !== -1" style="width: 13px" :src="isRectificas">
                        </div>
                        <div v-else>
                          <img v-if="(item.yhlb === 1 || item.yhlb === 2 || item.yhlb === 99) && item.status !== 0"
                               style="width: 13px"
                               :src="isRectificas">
                          <div v-else>
                            <img v-if="item.yhlb === 1 || item.yhlb === 2 || item.yhlb === 99"
                                 style="width: 13px"
                                 :src="isRectifica">
                          </div>
                        </div>
                      </div>
                      <img src="../../../assets/images/people.png" />
                      <div>{{item.userName}}</div>
                    </div>
                  </div>
                </div>
                <div class="data">
                  {{ (new Date(item.addtime).getMonth() + 1) < 10 ? `0${new Date(item.addtime).getMonth() + 1}` : new Date(item.addtime).getMonth() + 1 }}-
                  {{ (new Date(item.addtime).getDate() + 1) < 10 ? `0${new Date(item.addtime).getDate()}` : new Date(item.addtime).getDate()}}
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </div>
    <van-popup v-model="shows"  position="bottom">
      <van-datetime-picker
        id="van-datetime-picker"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="shows = false"
        @confirm="confirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { DatetimePicker, Popup, Toast } from 'vant';
import terminal from '@/assets/js/terminal';
export default {
  data () {
    return {
      isRectifica: require('../../../assets/images/jsd.gif'),
      isRectificas: require('../../../assets/images/lg.png'),
      url: require('../../../assets/images/icon-date.png'),
      shows: false,
      minDate: new Date(2015, 0, 1),
      maxDate: new Date(new Date().getUTCFullYear(), new Date().getMonth(), new Date().getDate()),
      currentDate: new Date(),
      origin: '2020-01-01',
      terminus: '2020-09-04',
      minDates: new Date(2020, 0, 1),
      maxDates: new Date(new Date().getUTCFullYear(), new Date().getMonth(), new Date().getDate()),
      id: 0,
      queryRoute: {},
      searchText: '',
      searchList: [],
      pageInfo: {
        page: 1,
        pageSize: 20
      },
      loading: false,
      finished: false,
      refreshing: false,
      total: 1,
      finishedText: '',
      error: false,
      userId: '',
      code: 200
    };
  },
  components: {
    [Toast.name]: Toast,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker
  },
  beforeRouteLeave(to, from, next) {
    //设置路由的 meta
    if(!(to.path === '/hard_detail' || to.path === '/ptlook')){
      localStorage.removeItem("list_scrollTop");
    }
    next();
  },
  //进入该页面时，用之前保存的滚动位置赋值
  beforeRouteEnter (to, from, next) {
    next(vm => {
      var list_scrollTop = localStorage.getItem("list_scrollTop")?JSON.parse(localStorage.getItem("list_scrollTop")):null;
      if(list_scrollTop||list_scrollTop===0){
        $('.list-gun').animate({scrollTop: Number(list_scrollTop)}, 0);
      } else {
        vm.userId = Number(localStorage.getItem("userId")) //获取访问id
        vm.queryRoute = JSON.parse(sessionStorage.getItem('time'));
        vm.show = false;
        vm.searchText = '';
        vm.minDates = new Date(2020, 0, 1);
        vm.maxDates = new Date(new Date().getUTCFullYear(), new Date().getMonth(), new Date().getDate());
        vm.searchList = [];
        vm.pageInfo.page = 1;
        if (vm.searchList.length === 0) {
          vm.loading = true;
          vm.finished = true;
          vm.query();
        }
      }
      localStorage.removeItem("list_scrollTop");
    })
  },
  methods: {
    jumpDetail (data) {
      localStorage.setItem("list_scrollTop",$('.list-gun').scrollTop());
      // localStorage.setItem('searchList', JSON.stringify(this.searchList));
      localStorage.setItem('hard_detail_from', '/patrol_query')
      if (data.patrol_troubleshoot !== 0) {
        sessionStorage.setItem("inspection_patrolTroubleshootId", data.patrol_troubleshoot);
        sessionStorage.setItem("inspection_infoId", data.patrol_troubleshoot_info_id);
        // localStorage.removeItem('domPlayString')
        this.$router.push("/hard_detail");
      } else {
        this.$router.push({
          path: '/ptlook',
          query: { id: data.id, ids: 14 }
        });
      }
    },
    onLoads () {
      if (this.searchList.length > 0) {
        this.onLoad();
      } else {
        this.finished = true;
      }
    },
    //  分页加载
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.searchList = [];
          this.refreshing = false;
        }
        if (this.searchList.length !== this.total) {
          this.finished = false;
          this.searchQuerys();
        } else {
          if (this.total > 15) {
            this.finishedText = '没有更多啦';
          } else {
            this.finishedText = '';
          }
          this.loading = false;
          this.finished = true;
        }
      }, 1000);
    },
    // //  下拉加载
    // onRefresh() {
    //   this.pageInfo.page = 1;
    //   this.finished = true;
    //   this.loading = true;
    //   this.onLoad();
    // },
    searchQuery (index) {
      this.pageInfo.page = 1;
      this.searchList = [];
      this.loading = false;
      this.code = 0;
      terminal.Start();
      this.searchQuerys(index);
    },
    //  搜索
    searchQuerys (index) {
      let that = this;
      let params = {
        userId: that.userId,
        content: that.searchText,
        startTime: that.origin,
        endTime: that.terminus,
        page: that.pageInfo.page,
        pageSize: that.pageInfo.pageSize
      };
      that.axios.get(`${that.$global_msg.Url.host}/partroInspection/condition`,
        { params }).then( res => {
          if (res.data.code === 200) {
            if (res.data.rows.total === 0) {
              that.$toast("暂无数据");
            }
            if (index !== undefined) {
              terminal.end();
            }
            that.finished = false;
            that.loading = false;
            that.searchList = that.searchList.concat(res.data.rows.list);
            that.total = res.data.rows.total;
            that.code = res.data.code;
            that.pageInfo.page++;
          }
      }).catch( e => terminal._error(e));
    },
    //  返回
    clickBack () {
      this.$router.back();
      // this.$router.push({
      //   path: this.queryRoute.path
      // })
    },
    //  查询数据
    query () {
      this.origin = this.dateConversion(this.minDates);
      this.terminus = this.dateConversion(this.maxDates);
    },
    //  打开弹框
    openPopup (id) {
      this.shows = true;
      this.id = id;
      switch (id) {
        case 0: this.currentDate = this.minDates;
          break;
        default: this.currentDate = this.maxDates;
      }
    },
    //  弹框确定
    confirm () {
      this.shows = false;
      if (this.id === 0) {
        this.minDates = this.currentDate;
        if (this.minDates <= this.maxDates) {
          this.origin = this.dateConversion(this.currentDate);
        } else {
          Toast('起始日期必须小于截止日期');
        }
      } else {
        this.maxDates = this.currentDate;
        if (this.minDates <= this.maxDates) {
          this.terminus = this.dateConversion(this.currentDate);
        } else {
          Toast('截止日期必须大于起始日期');
        }
      }
    },
    //  日期转换
    dateConversion (date) {
      return date.getFullYear() + '-' +
        ((date.getMonth() + 1) < 10 ? `0${(date.getMonth() + 1)}` : date.getMonth() + 1) + '-' +
        (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate());
    }
  }
}
</script>

<style scoped>
  * {
    box-sizing: border-box;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }
  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
  }
  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }
  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .img {
    width: 50px;
    height: 50px;
  }
  .btn-add img {
    width: 0.529629rem;
    height: 0.529629rem;
  }
  .btn-search img {
    width: 0.529629rem;
    height: 0.529629rem;
  }
  .menPhis-main {
    min-height: 100vh;
    padding: 1.8519rem 0 0;
  }
  .menPhis-date-box {
    padding: 0.262963rem;
    background-color: #f7f7f9;
  }
  .date-box {
    display: flex;
    align-items: center;
  }
  .date-boxs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    width: 50%;
    padding: 0.262963rem;
    border-radius: 0.092593rem;
    color: #999999;
  }
  .date-line {
    padding: 0 10px;
    color: #5f5d5c;
  }
  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
  }
  .search-boxs {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    line-height: 100px;
    padding: 0 30px;
    border-radius: 50px;
    flex: 1;
    margin-right: 10px;
  }
  .search-input {
    flex: 1;
    margin-left: 20px;
  }
  .menPhis-date-list {
    height: calc(100vh - 520px);
    padding: 0 0.262963rem;
  }
  .list-title {
    padding: 20px;
    border-bottom: 1Px solid #F2F2F2;
    font-weight: 500;
  }
  .center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.1852rem;
  }
  .img_logo5 {
    width: 0.6667rem;
    height: 0.7407rem;
    margin-right: 0.5556rem;
  }
  .introduce {
    display: flex;
    color: #8E8E8E;
    font-size: 0.3148rem;
    align-items: center;
    margin-top: 0.0926rem;
  }
  .intro_name {
    display: flex;
    align-items: center;
    /* margin-left: 0.5rem; */
  }
  .intro_name img {
    width: 0.2963rem;
    margin-right: 0.1852rem;
  }
  .list-gun {
    height: calc(100vh - 5.648148rem);
    overflow: hidden;
    overflow-y: auto;
  }
  .intro_name div {
    font-size: 0.2963rem;
  }
  .data {
    color: #8E8E8E;
  }
  .box_list {
    display: flex;
    align-items: center;
    height: 1.3889rem;
  }
  .small_title {
    width: 5.6481rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
<style>
  #van-datetime-picker>div {
    height: 1.25rem;
    line-height: 1.25rem;
    background-color: #fff;
  }
  #van-datetime-picker>div>div {
    font-size: 0.3888888888888889rem;
  }
  #van-datetime-picker>div>button {
    padding: 0 50px;
    font-size: 0.3888888888888889rem;
  }
